import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Button,
  TouchableOpacity,
  Image,
  FlatList,
  PixelRatio
} from 'react-native';
//异步获取数据
import HttpAxios from '../utils/HttpAxios';
//测试按钮组件
import LmbButton from '../commons/LmbButton'
import {window} from '../utils/util'
export default class HomePage extends Component {
  static navigationOptions = ({navigation})=>{
    const params = navigation.state.params || {};

    return {

      headerTitle:params.title?params.title:'柠檬邦',

      headerStyle:{
        backgroundColor:'#111111',
      },
      headerTintColor:'#fff',
      headerTitleStyle:{
        fontWeight:'bold',
        alignSelf:'center',
        alignItems:'center',
      },
      headerRight:(
       <TouchableOpacity onPress={()=>navigation.navigate('Login')}>
         <Image
           style={styles.button}
           source={require('../assets/images/group.png')}
         />
       </TouchableOpacity>
      ),
      headerLeft:(
        <TouchableOpacity onPress={()=>navigation.navigate('MyModal')}>
          <Image
            style={styles.button}
            source={require('../assets/images/setting.png')}
          />
        </TouchableOpacity>
      )

    }
  };
  getInfo(url){
    HttpAxios.get('/1220562')
      .then(function (response) {
        alert(JSON.stringify(response));
      })
      .catch(function (error) {
        alert(error);
      });
  }
  onClick(){

    alert(window.width);
  }
  toClick(){
    alert(1233);
  }
  render() {
    const {navigation} = this.props;
    const isSelect = false;
    return (
      <View style={styles.container}>
        <LmbButton
           containerStyle = {
             [styles.BrandNameStyle, isSelect ? { backgroundColor: 'rgb(240, 240, 240)', borderRightWidth: 0 } : { backgroundColor: '#fcfcfc', borderRightWidth: 1/PixelRatio.get()  }]
           }
           style={[{ fontSize: 16, textAlign: 'center' },
             isSelect ? { color: 'red' } : { color: 'black' }]}
           text='按钮'
           onPress={() => this.onClick()}
           />
           <LmbButton
              containerStyle = {
                [styles.BrandNameStyle, isSelect ? { backgroundColor: 'rgb(240, 240, 240)', borderRightWidth: 0 } : { backgroundColor: '#fcfcfc', borderRightWidth: 1/PixelRatio.get()  }]
              }
              style={[{ fontSize: 16, textAlign: 'center' },
                isSelect ? { color: 'red' } : { color: 'black' }]}
              text='按钮'
              onPress={() => this.toClick()}
              />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F5FCFF',
    flexDirection: 'row',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  button:{
    alignSelf:'stretch',
    width:20,
    height:20,
  },
  BrandNameStyle:{
      justifyContent: 'center',
      alignItems: 'center',
      width: window.width / 4,
      height: 50,
      backgroundColor: 'rgb(240, 240, 240)',
      borderColor: 'gray',
      borderWidth: 1/PixelRatio.get(),
      borderLeftWidth: 0,
      borderTopWidth: 0
  }
});
